UI Development with Chakra UI Vue — Icon Buttons

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Icon Buttons

We can add icon buttons with Chakra UI Vue.

To do this, we write:

<template>
  <c-box> <c-icon-button icon="check" aria-label="check" /> </c-box>
</template>

<script>
import { CBox, CIconButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CIconButton,
  },
};
</script>

We add the icon prop to set the name of the icon to display.

aria-label has the text description of the icon.

The variant-color prop sets the background color:

<template>
  <c-box>
    <c-icon-button icon="check" aria-label="check" variant-color="blue" />
  </c-box>
</template>

<script>
import { CBox, CIconButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CIconButton,
  },
};
</script>

size prop sets the size:

<template>
  <c-box>
    <c-icon-button icon="check" aria-label="check" size="lg" />
  </c-box>
</template>

<script>
import { CBox, CIconButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CIconButton,
  },
};
</script>

Custom icons also works with c-icon-button .

For instance, we can write:

main.js

import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import App from "./App.vue";

const customIcons = {
  fortranIcon: {
    path: `
      <path d="M19.536 0H4.464A4.463 4.463 0 0 0 0 4.464v15.073A4.463 4.463 0 0 0 4.464 24h15.073A4.463 4.463 0 0 0 24 19.536V4.464A4.463 4.463 0 0 0 19.536 0zm1.193 6.493v3.871l-.922-.005c-.507-.003-.981-.021-1.052-.041-.128-.036-.131-.05-.192-.839-.079-1.013-.143-1.462-.306-2.136-.352-1.457-1.096-2.25-2.309-2.463-.509-.089-2.731-.176-4.558-.177L10.13 4.7v5.82l.662-.033c.757-.038 1.353-.129 1.64-.252.306-.131.629-.462.781-.799.158-.352.262-.815.345-1.542.033-.286.07-.572.083-.636.024-.116.028-.117 1.036-.117h1.012v9.3h-2.062l-.035-.536c-.063-.971-.252-1.891-.479-2.331-.311-.601-.922-.871-2.151-.95a11.422 11.422 0 0 1-.666-.059l-.172-.027.02 2.926c.021 3.086.03 3.206.265 3.465.241.266.381.284 2.827.368.05.002.065.246.065 1.041v1.039H3.271v-1.039c0-.954.007-1.039.091-1.041.05-.001.543-.023 1.097-.049.891-.042 1.033-.061 1.244-.167a.712.712 0 0 0 .345-.328c.106-.206.107-.254.107-6.78 0-6.133-.006-6.584-.09-6.737a.938.938 0 0 0-.553-.436c-.104-.032-.65-.07-1.215-.086l-1.026-.027V2.622h17.458v3.871z"/>
    `,
    viewBox: "0 0 40 40"
  }
};

Vue.use(Chakra, {
  icons: {
    extend: {
      ...customIcons
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");

App.vue

<template>
  <c-box>
    <c-icon-button icon="fortranIcon" aria-label="check" size="lg" />
  </c-box>
</template>

<script>
import { CBox, CIconButton } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CIconButton,
  },
};
</script>

customIcons has the SVG icon’s path element.

We merge customIcons into extend to add the icon.

And we use the icon by setting the icon prop to the property name of the icon in customIcon .

Conclusion

We can add icon buttons easily with Chakra UI Vue.